<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在线鲜花销售网</title>
<meta name="keywords" content="鲜花，鲜花速递，鲜花网，花店，开业花篮" />
<meta name="description" content="各种鲜花绿植，应有尽有" />
<link href="images/xicon.png" rel="shortcut icon" type="image/x-icon" />
<link href="css/header.css" rel="stylesheet" type="text/css" />
<link href="css/pay.css" rel="stylesheet" type="text/css" />
<link href="css/footer.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- 买家账号：cwrrga5796@sandbox.com
 	   买家密码：111111 -->
 	   
<!-- 顶部区域 -->
<header id="header">
	<!-- 顶部标题区域 -->
	<div class="htitle">
    	<a href="#" target="_blank" class="location">衡阳</a>
        
        <div class="header-info">
            <div class="login-info">
            	
            </div>
            
            <div class="person-info">
            	<span>|</span>
            	<a href="order.html" target="_blank">我的订单</a>
                <span>|</span>
                <a href="#" target="_blank">我的鲜花</a>
                <span>|</span>
                <a href="#" target="_blank">客户服务</a>
                <span>|</span>
           		<a href="#" target="_blank">个人信息</a>
            </div>
        
        </div>
    </div>
    
    <!-- 顶部搜索区域 -->
    <div class="search">
    	<div class="search_left">
    		<a href="index.html" title="首页">
            	<img src="images/logo.png" width="260px" height="120px"/> 
            </a>
        </div>
        
        <div class="search_right">
        	<div class="search_top">
                <div class="search_div">
                    <input type="search" class="search-ipt" placeholder="请输入要搜索的内容" />
                    <input type="button" class="search-btn"  onclick = "searchGoods()"/>  
                </div>
                <div class="buycart">
                	<i class="iconfont">0</i>
                    <a href="cart.html" target="_blank" onclick="toCart()">我的购物车</a>
                </div>
            </div>
            
            <div class="search_item" id="search_item">   
            </div>
        </div>
    </div>
</header>

     
<!-- 收货地址 -->
<h3 class="common_title">确认收货地址</h3>

<div class="common_list_con clearfix">
    <input type="hidden" id="default_addr"/>
    <input type="hidden" id="current_addr"/>
    <dl id="addr_list">
        <dt>寄送到：</dt>

	</dl>
    <a href="javascript:showAddrDiv()" class="edit_site">添加收货地址</a>
</div>

<div id="addr_div">
    <img src="images/close.png" title="关闭" onclick="hiddenDiv()"/>
    <form id="myform">
        <ul>
            <li>
                <label for="addr_name">收货人：</label>
                <input id="addr_name" name="name" type="text" placeholder="请输入收货人姓名..." />
            </li>
            <li>
                <label for="addr_tel">联系方式：</label>
                <input id="addr_tel" name="tel" type="text" placeholder="请输入收货人联系方式..." />
            </li>
            <li>
                <label>收货地址：</label>
                <select id="province" name="province"></select>
                <select id="city" name="city">
                    <option value="0">--请选择城市--</option>
                </select>
                <select id="area" name="area">
                    <option value="0">--请选择地区--</option>
                </select>
            </li>
            <li>
                <label for="addr_addr">详细地址：</label>
                <input id="addr_addr" name="addr" style='width: 480px;' type="text" placeholder="请输入详细地址（街道、门牌等）" />
            </li>
            <li class="addr_btn">
                <a href="javascript:addAddr()"  class="add_addr_btn">添加收货地址</a>
                <a href="javascript:changeAddr()" class="change_addr_btn">修改收货地址</a>
            </li>
        </ul>
    </form>
</div>

<!-- 支付方式 -->	
<h3 class="common_title">支付方式</h3>	
<div class="common_list_con clearfix">
    <div class="pay_style_con clearfix">
        <input type="radio" name="pay_style" checked>
        <label class="cash">货到付款</label>
        <input type="radio" name="pay_style">
        <label class="weixin">微信支付</label>
        <input type="radio" name="pay_style">
        <label class="zhifubao"></label>
        <input type="radio" name="pay_style">
        <label class="bank">银行卡支付</label>
    </div>
</div>

<!-- 商品列表 -->
<h3 class="common_title">商品列表</h3>
<div class="common_list_con clearfix" id="order_list">
    <ul class="goods_list_th clearfix">
        <li class="col01">商品名称</li>
        <li class="col02">商品单位</li>
        <li class="col03">商品价格</li>
        <li class="col04">数量</li>
        <li class="col05">小计</li>		
    </ul>
</div>
 
<!-- 金额结算 -->	
<h3 class="common_title">总金额结算</h3>
<div class="common_list_con clearfix">
    <div class="settle_con">
        <div class="total_goods_count">共<em id="totalcount"></em>件商品，总金额<b id="total_price"></b></div>
        <div class="transit">运费：<b>10元</b></div>
        <div class="total_pay">实付款：<b id="total_pay"></b></div>
    </div>
</div>
<div class="order_submit clearfix">
    <a href="javascript:orderPay()" id="order_btn" >提交订单</a>
</div>	

<div class="popup_con">
    <div class="popup">
        <p>订单提交成功，3秒后自动跳转到首页</p>
    </div>
    <div class="mask"></div>
</div>    
        
<footer>
	<div class="fservice">
		<ul class="clearfix">
			<li>
				<span>
					<img src="images/f01.png" >
					<a href="#">热诚服务</a>
				</span>
			</li>
			<li><span><img src="images/f02.png" ><a href="#">客户信赖</a></span></li>
			<li><span><img src="images/f03.png" ><a href="#">时尚原创花艺</a></span></li>
			<li><span><img src="images/f04.png" ><a href="#">订单实拍</a></span></li>
			<li><span><img src="images/f05.png" ><a href="#">优惠多多</a></span></li>
			<li><span><img src="images/f06.png" ><a href="#">1小时配送</a></span></li>
			<li><span><img src="images/f07.png" ><a href="#">售后服务</a></span></li>
		</ul>
	</div>
	
	<div class="foot_link">
        <a href="#">关于我们</a> <span> | </span>
        <a href="#">联系我们</a> <span> | </span>
        <a href="#">招聘广告</a> <span> | </span>
        <a href="#">友情链接</a>
    </div>
    <p>CopyRight &copy; 2021 <a class="copy" href="#" target="_blank">点心思在线鲜花销售系统</a> All Rights Reserverd</p>
    <p>电话：0734-7572842 湘ICP备12345678号-1</p>
</footer>

<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/checkLoginForPay.js"></script>
<script src="js/addr.js"></script>
<script type="text/javascript">
    $(function (){
        //先来获取到我们要购买的商品的信息
        let cnos = location.hash.replace("#","");
        if ( cnos == "" ){
            location.href = "index.html";
            return ;
        }

        //根据传过来的cno,来查询我们的信息，显示上去
        $.post("order",{
            op: 'findGoodsInfoByCnos',
            cnos: cnos
        },function (data){
            let str = '';
            let total = 0;
            let totalPrice = 0;
            for (let i = 0; i < data.length; i++){
                let pic = data[i].pics.split(";")[0].split("_")[1];
                let price = (data[i].num * data[i].price).toFixed(2);

                str +=` <ul class="goods_list_td clearfix">
                            <li class="col01">${i+1}</li>\t\t\t
                            <li class="col02"><img src="images/goods/${pic}"></li>
                            <li class="col03">${data[i].gname}</li>
                            <li class="col04">${data[i].weight}</li>
                            <li class="col05">${data[i].price}元</li>
                            <li class="col06">${data[i].num}</li>
                            <li class="col07">${price}元</li>\t
                        </ul>`;
                total += data[i].num;
                totalPrice += parseInt(price);
            }
            //放值
            $("#order_list").append($(str));
            $("#totalcount").html(total);
            $("#total_price").html(totalPrice);
            $("#total_pay").html(totalPrice + 10);
        },"json");


        //获取到收货地址
        $.post("addr",{
            op: 'findByMno'
        },function (data){
            let str = '';

            if( data == 0 ){
                //没有收货地址
                str += "暂无收货地址，请添加";
                $("#addr_list").append(str);
                return ;
            }else{
                $.each( data, function ( index, item ){
                    if(item.flag == 1){
                        str += `<dd class="current_location default_location" data-ano = "${item.ano}">`;
                    }else{
                        str +=`<dd class="default_location" data-ano = "${item.ano}">`;
                    }
                    str += `${item.province} ${item.city} ${item.area} ${item.addr} （${item.name} 收） ${item.tel}`;
                    if( item.flag == 1 ){
                        str +=` <a href="javascript:void(0)"  onclick="editAddr(${item.ano})">编辑收货地址</a>
                                <a href="javascript:void(0)"  onclick="delAddr(this,${item.ano})">删除</a></dd>`;
                    }else{
                        str += ` <a href="javascript:void(0)" onclick="editAddr(${item.ano})">编辑收货地址</a>
                                 <a href="javascript:void(0)" class="current" onclick="currentAddr(this,${item.ano})">设为当前收货地址</a>
                                 <a href="javascript:void(0)" onclick="delAddr(this,${item.ano})">删除</a> </dd>`;
                    }
                });
                $("#addr_list").append($(str));
                location.l
            }
        },"json");
    })


    //添加收货地址
    function addAddr(){
        let name = $("#addr_name").val();
        let tel = $("#addr_tel").val();
        let prov = $("#province").val();
        let city = $("#city").val();
        let area = $("#area").val();
        let addr = $("#addr_addr").val();

        if( name == "" || tel == "" || prov == "--请选择省份--" || city == "--请选择城市--" || area == "--请选择地区--" || addr == ""){
            return ;
        }

        $.post("addr",{
            op: "addAddr",
            name: name,
            tel: tel,
            prov: prov,
            city: city,
            area: area,
            addr: addr
        },function (data){
            if( data == "-1"){
                alert("添加失败");
                $("#addr_div").css("display", "none");
                clearValue();
                return ;
            }
            $("#addr_div").css("display", "none");
            clearValue();
            let str = '';
            str += `<dd class="default_location" data-ano = "${data}">
                        ${prov} ${city} ${area} ${addr} （${name} 收） ${tel}
                        <a href="javascript:void(0)" onclick="editAddr(${data})">编辑收货地址</a>
                        <a href="javascript:void(0)" class="current" onclick="currentAddr(this,${data})">设为当前收货地址</a>
                        <a href="javascript:void(0)" onclick="delAddr(this,${data})">删除</a>
                    </dd>`;
            $("#addr_list").append(str);

        },"text");
    }

    //删除地址
    function delAddr(obj,ano){
        let result = confirm("您确定要删除该数据吗？");
        if ( !result ){
            return ;
        }
        $(obj).parent().remove();

        $.post("addr",{
           op: "delAddr",
           ano: ano
        },function (data){
            if (data == 1){
                alert("删除成功");
            }
        },"text");
    }
    let anos = '';
    
  //修改地址
   function editAddr(ano){
       $("#addr_div").css("display", "block");
       $(".addr_btn .add_addr_btn").css("display","none");
       $(".addr_btn .change_addr_btn").css("display","block");
       anos = ano;
   }
    function changeAddr(){
        let name = $("#addr_name").val();
        let tel = $("#addr_tel").val();
        let prov = $("#province").val();
        let city = $("#city").val();
        let area = $("#area").val();
        let addr = $("#addr_addr").val();

        $.post("addr",{
            op: "changeAddr",
            name: name,
            tel: tel,
            prov: prov,
            city: city,
            area: area,
            addr: addr,
            anos: anos
        },function (data){
			if( data == 1 ){
                clearValue();
                $("#addr_div").css("display", "none");
                //alert("修改成功");
				location.reload();
			}
        },"text")
    }

    //设置当前
    function currentAddr(obj,ano){
       $.post("addr",{
            op: 'currentAddr',
            ano: ano
       },function (data){
            if(data == 1){
                location.reload();
            }
       },"text");
    }
    //清空值
    function clearValue(){
        $("#addr_name").val("");
        $("#addr_tel").val("");
        $("#province").val("--请选择省份--");
        $("#city").val("--请选择城市--");
        $("#area").val("--请选择地区--");
        $("#addr_addr").val("");
    }


    //提交订单
    function orderPay(){
       //首先，得到我们的订单编号，以及商品总价
        let ano = $(".current_location").data("ano") || $(".default_location").data("ano");
        let price = $("#total_pay").html();
        let cnos = location.hash.replace("#","");

        //生成订单
        $.post("order",{
            op: 'add',
            ano: ano,
            price: price,
            cnos: cnos
        },function (data){
            if(data == "0"){
                alert("网络错误，请稍后重试")
                return ;
            }
            $(".popup_con").fadeIn('fast',function (){
                setTimeout(function (){
                    $(".popup_con").fadeOut('fast',function (){
                        location.href = "alipay?ono=" + data+ "&price=" + price;
                    });
                },3000)
            });
        },"text");


    }
    function showAddrDiv() {
        $("#addr_div").css("display", "block");
        $(".addr_btn .change_addr_btn").css("display","none");
        $(".addr_btn .add_addr_btn").css("display","block");
    }

    function hiddenDiv() {
        $("#addr_div").css("display", "none");
    }
</script>
</body>
</html>
